<template>
    <div class="container autoGrow flex-row">
        <div class="choose-type flex-column">
            <div class="layui-card choose-type-card">
                <div class="layui-card-header">活码类型</div>
                <div class="layui-card-body">
                    <!-- <div class="layui-form"> -->
                        <!-- <select name="type" lay-verify="required" lay-filter="typeChange">
                            <option value="">请选择活码类型</option>
                            <option value="0">客服账号</option>
                            <option value="1">群活码</option>
                        </select> -->
                    <!-- </div> -->

                    <el-select v-model="type" placeholder="请选择活码类型">
                        <el-option label="客服账号" :value="0"></el-option>
                        <el-option label="群活码" :value="1"></el-option>
                    </el-select>

                </div>
            </div>

            <div class="layui-card flex-column choose-account-card" v-if="type === 1">
                <div class="layui-card-header">选择客服账号</div>
                <div class="layui-card-body choose-account-list">

                     <label class="flex-row account-item" v-for="(item) in accounts" :key="item.id">
                        <input type="checkbox" @change="accountChange(item)" :checked="accountChecked.includes(item.id)">


                        <friend
                            :avatar="item.avatar"
                            :name="item.name"
                            :wxid="item.wxid"
                            :gender="item.gender"
                            class="account-item-friend"
                        />
                    </label>

                </div>
            </div>


        </div>
        <div class="choose-account flex-column">
            <div class="layui-card name-card">
                <div class="layui-card-header">活码名称</div>
                <div class="layui-card-body">
                    <div class="layui-form">
                        <input type="text" v-model="codeName" name="title" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-card name-card">
                <div class="layui-card-header">背景图</div>
                <div class="layui-card-body">
                    <div class="layui-form flex-row">
                        <uploadPictureCard class="bgurl-select" :size="50" :src="imageSrc" @uploaded="onUploaded" />
                        <el-popover
                        placement="right"
                        width="400"
                        trigger="click">
                        <el-image :src="require('@/assets/images/code-demo.jpg')"></el-image>
                        <el-button type="text" slot="reference">背景图模版<i class="el-icon-question el-icon--right"></i></el-button>
                        </el-popover>
                    </div>
                </div>
            </div>
             <div class="layui-card flex-column account-card">
                <div class="layui-card-header account-card-title">
                    <div>
                        选择{{type===1?'群':'客服账号'}}
                        <el-tooltip v-if="type===1" class="item" effect="dark" content="只显示人数在99人以下的群" placement="top">
                        <i class="el-icon-warning-outline"></i></el-tooltip>
                    </div>

                    <el-radio-group v-if="type===1" v-model="groupOwner" class="friend-hd-filter-owner" size="mini">
                        <el-radio-button :label="false">非群主</el-radio-button>
                        <el-radio-button :label="true">群主</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="layui-card-body account-list" v-if="type === 0">
                    <label class="flex-row account-item" v-for="(item) in accounts" :key="item.id">
                        <input :checked="accountServiceChecked.includes(item.id)" type="checkbox" name="" @change="accountServiceChange(item)">
                        <el-tooltip :content="item.name" placement="top">
                        <user-wrapper
                            :avatar="item.avatar"
                            :title="item.name"
                            :info="'好友'+item.friendcount+''"
                            class="account-item-friend" />
                        </el-tooltip>

                    </label>
                </div>
                <div class="layui-card-body account-list" v-if="type === 1">
                    <label class="flex-row account-item" v-for="(item) in groups" :key="item.id">
                        <input :checked="groupChecked.includes(item.id)" type="checkbox" name="" @change="groupChange(item)">
                        <el-tooltip :content="item.groupname" placement="top">
                        <user-wrapper
                            :avatar="item.avatar"
                            :title="item.groupname"
                            :info="accountsWxidMap[item.wxaccount].name"
                            class="account-item-group" />
                        </el-tooltip>
                    </label>
                </div>
            </div>
            <button @click="sendSave" type="button" class="layui-btn layui-btn-fluid">生成活码</button>
        </div>
        <div class="detail-container autoGrow flex-column infinite-list" v-infinite-scroll="load" v-loading="recordLoading && pageNo===0">
            <fieldset><legend><span name="fieldset">活码列表</span></legend></fieldset>
            <blockquote class="layui-card layui-elem-quote detail-item" v-for="(record) in records" :key="record.id">
                <div class="layui-card-body">
                    <div class="flex-row detail-content">
                        <div>
                        <span>{{record.codename}}</span>
                        <span class="fontGrey">（{{ formatTime(record.createtime) }} 配置）</span>
                        </div>
                        <div>
                            <el-button size="small" type="primary" style="position: relative;overflow:hidden">
                                <uploadPictureCard class="edit-bgurl" :size="150" :src="imageSrc" @uploaded="onEditBgUrl(record,$event)" />
                                修改背景图<i class="el-icon-upload el-icon--right"></i>
                            </el-button>
                            <el-button size="small" type="primary" @click="download(record)">导出到本地<i class="el-icon-download el-icon--right"></i></el-button>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="click"
                                @show="getQrCodeBase(record)"
                                content="">
                                <el-button style="margin-left:10px;margin-right:10px" size="small" slot="reference" type="success">二维码</el-button>
                                <div v-loading="qrcodeBase===''">
                                    <el-image style="width:200px;height:200px" :src="qrcodeBase"></el-image>
                                </div>
                            </el-popover>
                            <el-button  size="small" slot="reference" type="danger" @click="delRecord(record)">删除<i class="el-icon-delete el-icon--right"></i></el-button>
                        </div>
                    </div>
                    <div class="layui-card detail-setting">
                        <div class="layui-card-header">活动配置</div>
                        <div class="layui-card-body">
                            <div class="detail-setting-list">
                                <label class="flex-row account-item detail-setting-item" v-for="(account) in record.accounts" :key="account.id">
                                    <input type="checkbox" name="" :checked="account.checked" @change="account.checked = !account.checked">
                                    <el-tooltip :content="account.nick" placement="top">
                                    <user-wrapper
                                        :avatar="account.avatar"
                                        :title="account.nick"
                                        :info="'好友'+account.friendcount+''"
                                        class="account-item-friend" />
                                    </el-tooltip>
                                </label>
                                <label class="flex-row account-item detail-setting-item" v-for="(group) in record.groups" :key="group.id">
                                    <input type="checkbox" name="" :checked="group.checked" @change="group.checked = !group.checked">

                                    <el-tooltip :content="group.groupname" placement="top">
                                        <user-wrapper
                                    :avatar="group.avatar"
                                    :title="group.groupname"
                                    :info="'共'+group.personnum+'人 '+(accountsWxidMap[group.wxaccount]?accountsWxidMap[group.wxaccount].name:group.wxaccount)"
                                    class="account-item-friend" />
                                    </el-tooltip>
                                </label>

                            </div>
                            <div class="detail-setting-ctrl">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="type===0?accountDialogShow(record):groupDialogShow(record)">新增{{type===0?'账号':'群'}}</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="delAccount(record)">删除账号</button>
                            </div>
                        </div>
                    </div>
                </div>
            </blockquote>
        </div>
        <modal
            name="addAccountDialog"
            transition="nice-modal-fade"
            overlayTransition="overlay-fade"
            draggable=".layui-card-header" :width="372" height="auto">

            <div class="layui-card">
                <div class="layui-card-header" style="display: flex; flex-direction: row;justify-content: space-between;">
                    请选择账号<i class="layui-icon layui-icon-close deleteMessage" @click.stop=" $modal.hide('addAccountDialog');accountDialogChecked=[] "></i>
                </div>
                <div class="layui-card-body">
                    <div style="max-height:300px;overflow:auto;padding:10px 0">
                        <label class="flex-row account-item" v-for="(item) in accounts" :key="item.id">
                            <input :checked="accountDialogChecked.includes(item.wxid)" type="checkbox" name="" @change="accountDialogChange(item)">
                            <friend
                                :avatar="item.avatar"
                                :name="item.name"
                                :wxid="item.wxid"
                                :gender="item.gender"
                                class="account-item-friend"
                            />
                        </label>
                    </div>
                    <button @click="accountDialogSubmit()" type="submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">确定</button>
                </div>
            </div>

        </modal>

         <modal
            name="addGroupDialog"
            transition="nice-modal-fade"
            overlayTransition="overlay-fade"
            draggable=".layui-card-header" :width="620" height="auto">

            <div class="layui-card">
                <div class="layui-card-header" style="display: flex; flex-direction: row;justify-content: space-between;">
                    请选择群<i class="layui-icon layui-icon-close deleteMessage" @click.stop=" $modal.hide('addGroupDialog');groupDialogChecked=[] "></i>
                </div>
                <div class="flex-row layui-card-body group-dialog">
                    <div class="group-dialog-left">
                        <label @click="groupDialogAccountCheck(item)" :class="{'flex-row group-dialog-account':true,'selected':groupDialogAccount.id===item.id}" v-for="(item) in accounts" :key="item.id">
                            <friend
                                :avatar="item.avatar"
                                :name="item.name"
                                :wxid="item.wxid"
                                :gender="item.gender"
                            />
                        </label>
                    </div>
                    <div class="group-dialog-right">
                        <label class="flex-row group-dialog-group-item" v-for="(item) in dialogGroups" :key="item.id">
                            <input :checked="groupDialogChecked.includes(item.groupno)" type="checkbox" name="" @change="groupDialogChange(item)">
                            <el-tooltip :content="item.groupname" placement="top">
                            <group
                                :avatar="item.avatar"
                                :name="item.groupname"
                                :member="item.personnum"
                                :friend="item.friendNum"
                                class="group-dialog-group"
                            />
                            </el-tooltip>
                        </label>
                    </div>
                </div>
                <button @click="groupDialogSubmit()" type="submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">确定</button>
            </div>

        </modal>

    </div>
</template>
<script>
import friend from '@/components/friend'
import group from '@/components/group'
import userWrapper from '@/components/user-wrapper';
import uploadPictureCard from "@/components/upload-picture-card";
import { mapState } from 'vuex';
import { downloadFromBrowser,getBrowserHash,getBasehtml } from '@/lib/utils'
import QRCode from 'qrcode'
import CustomDialog from '@/components/customDialog';

export default {
    data(){
        return {
            type:0,
            recordLoading:false,
            accountChecked:[],
            accountDialogChecked:[],
            groupDialogChecked:[],
            groupsMap:{},
            codeName:'',
            imageSrc:'',

            groupOwner:false,

            accountServiceChecked:[],
            groupChecked:[],

            records:[],
            editrecord:{},

            groupDialogAccount:{},
            qrcodeBase:'',

            pageNo:0,
            pageSize:10

        }
    },

    components:{
        friend,group,userWrapper,CustomDialog,uploadPictureCard
    },
    computed:{
        ...mapState(['accountMap','accountListMap','uistate']),
        accountsWxidMap(){
            const {adminid} = this.uistate
            if( adminid ===-1 || !this.accountListMap[adminid] )return []
            let map = {}
            this.accountListMap[adminid].forEach(id=>{
                const item = this.accountMap[id]
                map[item.wxid] = {
                    id:item.id,
                    csid:item.csid,
                    name:item.nick,
                    avatar:item.avatar,
                    wxid:item.wxid,
                    gender:item.gender,
                    friendcount:item.friendcount
                }
            })
            return map

        },
        accounts(){
            const {adminid} = this.uistate
            if( adminid ===-1 || !this.accountListMap[adminid] )return []
            const accounts = this.accountListMap[adminid].map(id=>{
                const item = this.accountMap[id]
                return {
                    id:item.id,
                    csid:item.csid,
                    name:item.nick,
                    avatar:item.avatar,
                    wxid:item.wxid,
                    gender:item.gender,
                    friendcount:item.friendcount,
                    wxaccount:item.wxaccount
                }
            })
            return accounts
        },
        groups(){
            const accountChecked = this.accountChecked
            const groups = accountChecked.map(id=>this.groupsMap[id]).filter(item=>item)
            const _groups = [].concat.apply([], groups);
            const isonwer = this.groupOwner
            return _groups.filter(group=>group.personnum<=150 && ( group.isfirst=== (isonwer?1:2) ))
        },
        dialogGroups(){
            const account = this.groupDialogAccount
            if(!account.id)return;
            const { id } = account
            return (this.groupsMap[id]||[]).filter(group=>group.personnum<=200)
        }
    },
    mounted(){
        this.getRecords()
    },
    watch:{
        type(type,oldType){
            if(type!==oldType){
                this.pageNo = 0
                this.records = []
                this.getRecords()
            }
        }
    },
    methods:{
        reset(){
            this.codeName = ''
            this.imageSrc = ''
            this.accountServiceChecked = []
            this.groupChecked = []
            this.accountChecked = []

        },
        typeChange({value}){
            this.type = value!==''?+value:-1
            this.getRecords()
            this.codeName = ''
        },
        /** 添加账号弹窗 */
        accountDialogChange(account){
            if(this.accountDialogChecked.includes(account.wxid)){
                this.accountDialogChecked = this.accountDialogChecked.filter(wxid=>{
                    return wxid!=account.wxid
                })

            }else{
                this.accountDialogChecked.push(account.wxid)
            }
        },
        accountDialogShow(record){
            this.editrecord = record
            this.$modal.show('addAccountDialog')
        },
        accountDialogSubmit(){
            this.addAccount(this.editrecord)
            this.accountDialogChecked = []
        },
        /** 添加账号弹窗 */
        /** 添加群弹窗 */
        groupDialogAccountCheck(account){
            const { adminid } = this.uistate
            this.groupDialogAccount = account
            const {id} = account
            if(this.groupsMap[id]&&this.groupsMap[id].length)return;
            this.getGroup(adminid,account.wxid,id)
        },
        groupDialogChange(group){
            if(this.groupDialogChecked.includes(group.groupno)){
                this.groupDialogChecked = this.groupDialogChecked.filter(groupno=>{
                    return groupno!=group.groupno
                })

            }else{
                this.groupDialogChecked.push(group.groupno)
            }
        },
        groupDialogShow(record){
            this.editrecord = record
            this.$modal.show('addGroupDialog')
            this.groupDialogAccountCheck(this.accounts[0])
        },
        groupDialogSubmit(){
            this.addGroup(this.editrecord)

        },
        /** 添加群弹窗 */

        accountChange(account){
            if(this.accountChecked.includes(account.id)){
                this.accountChecked = this.accountChecked.filter(id=>{
                    return id!=account.id
                })

            }else{
                this.accountChecked.push(account.id)
            }
            console.log(this.accountChecked)
            this.getGroupsByAccount()
        },
        getGroupsByAccount(){
            const { adminid } = this.uistate
            this.accountChecked.forEach(id=>{
                if(this.groupsMap[id]&&this.groupsMap[id].length)return;
                const account = this.accountMap[id]
                this.getGroup(adminid,account.wxid,account.id)
            })
            // Object.keys(this.groupsMap).forEach(key=>{
            //     if(!this.accountChecked.includes(key)){
            //         this.$set(this.groupsMap, key, [])
            //     }
            // })

        },
        getGroup(csid,wxaccount,id){
            this.$api.group.list({
                csid,
                wxaccount
            }).then(data=>{
                this.$set(this.groupsMap, id, data)
            }).catch(e=>this.$msg(e))
        },

        accountServiceChange(item){
            if(this.accountServiceChecked.includes(item.id)){
                this.accountServiceChecked = this.accountServiceChecked.filter(id=>id!=item.id)
            }else{
                this.accountServiceChecked.push(item.id)
            }
        },

        groupChange(item){
            if(this.groupChecked.includes(item.id)){
                this.groupChecked = this.groupChecked.filter(id=>id!=item.id)
            }else{
                this.groupChecked.push(item.id)
            }
        },

        load(){
           this.getRecords()
        },
        getRecords(){
            const codeType = this.type
            const csId = this.uistate.adminid
            const params = {
                csId,
                codeType,
                pageNo:this.pageNo+1,
                pageSize:this.pageSize
            }
            if(this.recordLoading)return
            this.recordLoading = true
            this.$api.acitvecode.getRecords(params)
                .then(data=>{
                    this.recordLoading = false
                    if(!data.length){
                        return this.$message({message:'没有更多了'})
                    }
                    this.pageNo = this.pageNo+1
                    if(this.pageNo === 1){
                        this.records = data
                    }else{
                        this.records = this.records.concat(data)
                    }


                })
                .catch(e=>{
                    this.recordLoading = false
                    this.$msg(e)

                })
        },
        sendSave(){
            const codename = this.codeName.trim()
            const codetype = this.type
            const accounts = this.accountMap
            const csid = this.uistate.adminid
            if(codetype === -1)return this.$msg('请选择活码类型')
            if(!codename)return this.$msg('请填写活码名称')

            const _accounts = this.accountServiceChecked.map(id=>accounts[id])
            let _groups = []
            this.groups.forEach(item=>{
                if(this.groupChecked.includes(item.id))_groups.push(item)
            })

            let itemids = []
            if(codetype === 0 ){
                itemids = _accounts.map(account=>account.wxid)
            }else if(codetype === 1){
                itemids = _groups.map(group=>{
                    return {
                        wxAccount:group.wxaccount,
                        groupNo:group.groupno
                    }
                })
            }
            if(!itemids.length)return this.$msg('请选择'+(codetype===1?'群':'账号') )
            const params = {
                codename,
                codetype,
                bgurl:this.imageSrc,
                itemids:JSON.stringify(itemids),
                csid
            }
            this.$api.acitvecode.save(params)
                .then(data=>{
                    if(codetype === 0){
                        data.accounts = _accounts
                    }else if(codetype ===1){
                        data.groups = _groups
                    }
                    this.records.unshift(data)
                    this.$msg('生成成功')
                    this.reset()
                })
                .catch(this.$msg)

        },
        delAccount(record){
            const { id,codename,codetype,csid,accounts,groups } = record
            const _accounts = (accounts||[]).filter(account=>!account.checked)
            const _groups = (groups||[]).filter(group=>!group.checked)
            let itemids = []
            if(codetype === 0){
                itemids = _accounts.map(account=>account.wxid)
            }else if(codetype ===1){
                itemids =_groups.map(group=>(
                    {
                        wxAccount:group.wxaccount,
                        groupNo:group.groupno
                    }
                ))
            }
            const params = {
                id,
                codename,
                codetype,
                itemids:JSON.stringify(itemids),
                csid,
                status:0
            }
            this.$api.acitvecode.save(params)
                .then(data=>{
                    if(codetype === 0){
                        record.accounts = _accounts
                    }else if(codetype ===1){
                        record.groups = _groups
                    }
                    this.$msg('保存成功')
                })
                .catch(this.$msg)

        },
        addAccount(record){
            const { id,codename,codetype,csid,accounts,groups } = record
            const _accounts = (accounts||[])
            const _groups = (groups||[])
            let itemids = []
            if(codetype === 0){
                itemids = Array.from(new Set(_accounts.map(account=>account.wxid).concat(this.accountDialogChecked)))
            }
            const params = {
                id,
                codename,
                codetype,
                itemids:JSON.stringify(itemids),
                csid,
                status:0
            }
            this.$api.acitvecode.save(params)
                .then(data=>{
                    if(codetype === 0){
                        let _accountMap = {}
                        Object.values(this.accountMap).forEach(_a=>{
                            _accountMap[_a['wxid']] = _a
                        })
                        record.accounts = itemids.map(key=>_accountMap[key])
                    }
                    this.accountDialogChecked = []
                    this.$modal.hide('addAccountDialog')
                    this.$msg('保存成功')
                })
                .catch(this.$msg)

        },
        addGroup(record){
            const { id,codename,codetype,csid,accounts,groups } = record
            const _accounts = (accounts||[])
            let _groups = (groups||[])
            let itemids = []
            const thisGroups = [].concat.apply([], Object.values(this.groupsMap))
            let _groupMap = {}
            Object.values(thisGroups).forEach(_a=>{
                _groupMap[_a['groupno']] = _a
            })

            const checkGroup = this.groupDialogChecked.map(groupno=>_groupMap[groupno])
            if(codetype === 1){
                _groups = _groups.concat(checkGroup)
                itemids = _groups.map(g=>({
                    wxAccount:g.wxaccount,
                    groupNo:g.groupno
                }))
            }
            const params = {
                id,
                codename,
                codetype,
                itemids:JSON.stringify(itemids),
                csid,
                status:0
            }
            this.$api.acitvecode.save(params)
                .then(data=>{
                    if(codetype === 1){
                        record.groups = _groups
                        // this.$forceUpdate()
                    }
                    this.groupDialogChecked = []
                    this.$modal.hide('addGroupDialog')
                    this.$msg('保存成功')
                })
                .catch(this.$msg)

        },
        delRecord(record){
            const { id,codename,codetype,csid,itemids,status } = record

            const params = {
                id,
                codename,
                codetype,
                itemids,
                csid,
                status:1
            }
            this.$api.acitvecode.save(params)
                .then(data=>{
                    this.records = this.records.filter(_record=>_record.id!==record.id)
                    this.$msg('删除成功')
                })
                .catch(this.$msg)

        },
        getQrCodeBase(record){
            getBrowserHash(data=>{
                const dataurl = getBasehtml(record.id,data,this.config.baseUrl,this.config.apiUrl)
                console.log(this.config)
                QRCode.toDataURL(dataurl,(err, url)=>{
                    this.qrcodeBase = url
                })

            })
        },
        download(record){
            getBrowserHash(data=>{
                const dataurl = getBasehtml(record.id,data,this.config.baseUrl,this.config.apiUrl)
                QRCode.toDataURL(dataurl,(err, url)=>{
                    downloadFromBrowser(url)
                    this.$msg('开始下载')
                })

            })
            return;
            const params = {
                codeId:record.id,
                fingerPrint:'111'
             }
            this.$api.acitvecode.getActiveQrcode(params)
                .then(data=>{
                    console.log(data)
                })
        },
        onUploaded(e){
            this.imageSrc = e
        },
        onEditBgUrl(record,e){
            if(e){
                const { id,codename,codetype,csid,accounts,groups } = record
                const params = {
                    bgurl:e,
                    csid,
                    id
                }
                this.$api.acitvecode.save(params)
                .then(data=>{
                    this.$msg('修改成功')
                    this.reset()
                })
                .catch(this.$msg)
            }
        }

    }
}
</script>
<style scoped>
.container{
    border-top: 1px solid #ccc;
    height: 100%;
}
.choose-type{
    width: 260px;
    overflow: auto;
    flex-shrink: 0;
    border-right: 1px solid #ccc;
    background: #e2e2e2;
    padding: 15px;
    box-sizing: border-box;
}
.choose-account{
    width: 260px;
    height: 100%;
    overflow: auto;
    flex-shrink: 0;
    border-right: 1px solid #ccc;
    background: #f1f1f1;
    padding: 15px;
    box-sizing: border-box;
}
.account-card{
    height: 100%;
}
.account-card-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.choose-type{
    height:100%;
}
.choose-card{

}
.bgurl-select{
    flex-shrink: 0;
    margin-right: 10px;
}
.edit-bgurl{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height:100%;
    z-index: 1;
    opacity: 0;
}
.choose-account-card{
    height:100%;
    /* margin-bottom: 10px; */
}
.choose-account-list{
    height:100%;
    overflow: auto;
}
.account-list{
    height:100%;
    overflow: auto
}
.account-item{
    align-items: center;
    margin-bottom: 10px;
}
.account-item:last-child{
    margin-bottom: 0
}
.account-item-friend,
.account-item-group{
    margin-left: 5px;
    overflow: hidden;
}
.detail-container{
    background-color: #f2f2f2;
    padding:15px;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
}
.detail-container fieldset {
    border: none;
    padding: 0;
    border-top: 1px solid #ddd;
    margin-bottom: 10px;
}
.detail-container fieldset legend {
    margin-left: 20px;
    padding: 0 10px;
    font-size: 22px;
    font-weight: 300;
}
.detail-item{
    background: #fafafa;
    padding:0;
}
.detail-setting{
    margin-top: 10px;
}
.detail-content{
    align-items: center;
    justify-content: space-between;
}
.detail-setting-list{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}
.detail-setting-item{
    margin-bottom: 0
}
.detail-setting-ctrl{
    margin-top:10px;
    text-align: right;
}
.group-dialog{
    padding: 0;

}
.group-dialog-left{
    background: #eee;
    box-shadow: -10px 0px 10px -10px #999 inset;
    width: 200px;
    overflow: auto
}
.group-dialog-right{
    box-sizing: border-box;
    width: 420px;
    height: 400px;
    overflow: auto;
    padding:0 10px;
    display: grid;
    grid-template-columns: 50% 50%;
}
.group-dialog-account{
    padding: 10px;
}
.group-dialog-account.selected{
    background: #fff;
    box-shadow: 0 5px 4px -4px #999;
}
.group-dialog .account-item-friend{
    margin-left: 0
}
.group-dialog-group{
    width: 160px;
    margin-left: 5px;
}
.group-dialog-group-item{
    align-items: center;
    padding: 5px;
}
</style>
